//第一步:引入vue-router插件
import VueRouter from 'vue-router';//VueRouter插件:对外暴露构造函数VueRouter(类)
//第二步:引入Vue核心库,因为你要安装这个插件Vue.use(xxxx);
import Vue from 'vue';
//第三步:安装插件
Vue.use(VueRouter);


//第四步:配置路由
//引入路由组件---一级路由组件
import About from '@/pages/About';
import Home from '@/pages/Home';

//引入Home路由下二级路由
import Message from '@/pages/home/Message';
import News from '@/pages/home/News';


//引入Detail三级路由组件
import Detail from '@/pages/home/Detail'

//配置路由[route],路由需要有路由器进行管理[router]
//VueRouter构造函数new出来的实例即为一个路由器
//需要注意,需要给VueRouter构造函数传递一个配置对象----配置对象的K不能瞎写、不能胡写、不能乱写
//单词写过凉凉
let router = new VueRouter({
    //设置路由的模式 hash | history
    mode:'history',
    //配置路由:由两部分组成,K->URL  V:相应的组件   数组里面每一个对象即为一个路由
    routes: [
        {
            path: '/home',//K
            component: Home,//V
            //配置项:单词不能瞎写、胡写、乱写：代表的子路由
            children: [
                {
                    path: 'message',            //子路由K第一种写法   路径写完整           /home/message
                    component: Message,          //第二种写法简写方法  不需要路径完整写法     message
                    //三级路由组件Detail
                    children: [
                        {  
                            //命名路由,给路由起一个名字
                            name:'erha',
                            path:'detail/:a/:b',
                            component:Detail
                        }
                    ]
                },
                {
                    path: 'news',
                    component: News
                }
                ,
                {
                    path: '/home',
                    redirect: '/home/news'
                }
            ]
        },
        {
            path: '/about',
            component: About
        },
        //重定向:默认访问根/,虽然有这个K,但是没有V
        //当用户访问/,里面重定向，让用户访问about[上来展示区域有内容显示出来！！！]
        //重定向的配置，放在那个位置都可以，谁先谁后'无所谓'
        {
            path: '/',
            redirect: '/about'
        }
    ]
});

//对外暴露路由器
export default router;

